<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue 编码规范 | 前端文档</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="shortcut icon" href="/icons/favicon.ico">
    <meta name="description" content="前端文档">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/assets/css/0.styles.d3d84be6.css" as="style"><link rel="preload" href="/assets/js/app.7f089e4c.js" as="script"><link rel="preload" href="/assets/js/2.9f5e73e8.js" as="script"><link rel="preload" href="/assets/js/3.2a47c23c.js" as="script"><link rel="preload" href="/assets/js/29.60c8dbe1.js" as="script"><link rel="prefetch" href="/assets/js/10.b5c5700e.js"><link rel="prefetch" href="/assets/js/11.80390338.js"><link rel="prefetch" href="/assets/js/12.f067bd5f.js"><link rel="prefetch" href="/assets/js/13.20c94e2c.js"><link rel="prefetch" href="/assets/js/14.3a03f335.js"><link rel="prefetch" href="/assets/js/15.fc48fa10.js"><link rel="prefetch" href="/assets/js/16.06981385.js"><link rel="prefetch" href="/assets/js/17.9b40465f.js"><link rel="prefetch" href="/assets/js/18.d89ca224.js"><link rel="prefetch" href="/assets/js/19.c6848e16.js"><link rel="prefetch" href="/assets/js/20.a0711b97.js"><link rel="prefetch" href="/assets/js/21.d566ad85.js"><link rel="prefetch" href="/assets/js/22.4901943a.js"><link rel="prefetch" href="/assets/js/23.d6255fa3.js"><link rel="prefetch" href="/assets/js/24.a88ce84e.js"><link rel="prefetch" href="/assets/js/25.19886fd0.js"><link rel="prefetch" href="/assets/js/26.5c944025.js"><link rel="prefetch" href="/assets/js/27.a61fd313.js"><link rel="prefetch" href="/assets/js/28.1e40ebfd.js"><link rel="prefetch" href="/assets/js/30.64963157.js"><link rel="prefetch" href="/assets/js/31.931ea69e.js"><link rel="prefetch" href="/assets/js/32.bce771e5.js"><link rel="prefetch" href="/assets/js/33.e9c7453f.js"><link rel="prefetch" href="/assets/js/34.99c27ee8.js"><link rel="prefetch" href="/assets/js/35.4066b2d3.js"><link rel="prefetch" href="/assets/js/36.fc941c57.js"><link rel="prefetch" href="/assets/js/37.14163d29.js"><link rel="prefetch" href="/assets/js/38.43335765.js"><link rel="prefetch" href="/assets/js/39.156dbace.js"><link rel="prefetch" href="/assets/js/4.6d8feda3.js"><link rel="prefetch" href="/assets/js/40.163bfe43.js"><link rel="prefetch" href="/assets/js/41.df97e701.js"><link rel="prefetch" href="/assets/js/42.9bafe70e.js"><link rel="prefetch" href="/assets/js/43.b86d1037.js"><link rel="prefetch" href="/assets/js/44.fc145987.js"><link rel="prefetch" href="/assets/js/45.594b749a.js"><link rel="prefetch" href="/assets/js/46.b6c8de53.js"><link rel="prefetch" href="/assets/js/47.bb78b392.js"><link rel="prefetch" href="/assets/js/48.3627a180.js"><link rel="prefetch" href="/assets/js/49.bbd39edf.js"><link rel="prefetch" href="/assets/js/5.77776c33.js"><link rel="prefetch" href="/assets/js/50.b68a715f.js"><link rel="prefetch" href="/assets/js/51.bc4475a2.js"><link rel="prefetch" href="/assets/js/6.480ee688.js"><link rel="prefetch" href="/assets/js/7.92c95b3e.js"><link rel="prefetch" href="/assets/js/8.4389b91c.js"><link rel="prefetch" href="/assets/js/9.4470fdec.js">
    <link rel="stylesheet" href="/assets/css/0.styles.d3d84be6.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">前端文档</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="standard Menu" class="dropdown-title"><span class="title">规范</span> <span class="arrow down"></span></button> <button type="button" aria-label="standard Menu" class="mobile-dropdown-title"><span class="title">规范</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/standard/HTML/" class="nav-link">
  HTML编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CSS/" class="nav-link">
  CSS编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JavaScript/" class="nav-link">
  JavaScript编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/VUE/" class="nav-link">
  VUE编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/Markdown/" class="nav-link">
  Markdown语法说明
</a></li><li class="dropdown-item"><!----> <a href="/standard/Commit/" class="nav-link">
  Git提交规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JSON/" class="nav-link">
  JSON数据规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CopyWriter/" class="nav-link">
  文案风格指南
</a></li></ul></div></div><div class="nav-item"><a href="/desgin/" class="nav-link">
  可视化平台
</a></div><div class="nav-item"><a href="/materiel/" class="nav-link">
  物料
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="plugin Menu" class="dropdown-title"><span class="title">插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="plugin Menu" class="mobile-dropdown-title"><span class="title">插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plugin/HRM-Player/" class="nav-link">
  HRM 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Vue-Flv-Player/" class="nav-link">
  FLV 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Calendar/" class="nav-link">
  Calendar 农历面板
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Very-Axios/" class="nav-link">
  Very-Axios
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="utils Menu" class="dropdown-title"><span class="title">函数库</span> <span class="arrow down"></span></button> <button type="button" aria-label="utils Menu" class="mobile-dropdown-title"><span class="title">函数库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/utils/Type/" class="nav-link">
  类型判断类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Validator/" class="nav-link">
  常规验证类
</a></li><li class="dropdown-item"><!----> <a href="/utils/String/" class="nav-link">
  字符串类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Array/" class="nav-link">
  数组类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Number/" class="nav-link">
  数字类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Money/" class="nav-link">
  金额类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Date/" class="nav-link">
  日期类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Calculate/" class="nav-link">
  浮点计算类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Tools/" class="nav-link">
  工具类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Storage/" class="nav-link">
  存储类
</a></li><li class="dropdown-item"><!----> <a href="/utils/DOM/" class="nav-link">
  DOM类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Event/" class="nav-link">
  事件处理类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="tools Menu" class="dropdown-title"><span class="title">工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="tools Menu" class="mobile-dropdown-title"><span class="title">工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/NodeJS/" class="nav-link">
  NodeJS
</a></li><li class="dropdown-item"><!----> <a href="/tools/Sourcetree/" class="nav-link">
  Sourcetree
</a></li><li class="dropdown-item"><!----> <a href="/tools/VisualStudioCode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/XShell/" class="nav-link">
  XShell
</a></li><li class="dropdown-item"><!----> <a href="/tools/Typora/" class="nav-link">
  Typora
</a></li><li class="dropdown-item"><!----> <a href="/tools/PicGo/" class="nav-link">
  PicGo
</a></li><li class="dropdown-item"><!----> <a href="/tools/XMind/" class="nav-link">
  XMind
</a></li></ul></div></div> <!----></nav> <label title="切换暗色" class="model"><input type="checkbox" hidden="hidden" name="model" id>⚫</label></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="standard Menu" class="dropdown-title"><span class="title">规范</span> <span class="arrow down"></span></button> <button type="button" aria-label="standard Menu" class="mobile-dropdown-title"><span class="title">规范</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/standard/HTML/" class="nav-link">
  HTML编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CSS/" class="nav-link">
  CSS编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JavaScript/" class="nav-link">
  JavaScript编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/VUE/" class="nav-link">
  VUE编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/Markdown/" class="nav-link">
  Markdown语法说明
</a></li><li class="dropdown-item"><!----> <a href="/standard/Commit/" class="nav-link">
  Git提交规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JSON/" class="nav-link">
  JSON数据规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CopyWriter/" class="nav-link">
  文案风格指南
</a></li></ul></div></div><div class="nav-item"><a href="/desgin/" class="nav-link">
  可视化平台
</a></div><div class="nav-item"><a href="/materiel/" class="nav-link">
  物料
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="plugin Menu" class="dropdown-title"><span class="title">插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="plugin Menu" class="mobile-dropdown-title"><span class="title">插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plugin/HRM-Player/" class="nav-link">
  HRM 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Vue-Flv-Player/" class="nav-link">
  FLV 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Calendar/" class="nav-link">
  Calendar 农历面板
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Very-Axios/" class="nav-link">
  Very-Axios
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="utils Menu" class="dropdown-title"><span class="title">函数库</span> <span class="arrow down"></span></button> <button type="button" aria-label="utils Menu" class="mobile-dropdown-title"><span class="title">函数库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/utils/Type/" class="nav-link">
  类型判断类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Validator/" class="nav-link">
  常规验证类
</a></li><li class="dropdown-item"><!----> <a href="/utils/String/" class="nav-link">
  字符串类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Array/" class="nav-link">
  数组类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Number/" class="nav-link">
  数字类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Money/" class="nav-link">
  金额类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Date/" class="nav-link">
  日期类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Calculate/" class="nav-link">
  浮点计算类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Tools/" class="nav-link">
  工具类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Storage/" class="nav-link">
  存储类
</a></li><li class="dropdown-item"><!----> <a href="/utils/DOM/" class="nav-link">
  DOM类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Event/" class="nav-link">
  事件处理类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="tools Menu" class="dropdown-title"><span class="title">工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="tools Menu" class="mobile-dropdown-title"><span class="title">工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/NodeJS/" class="nav-link">
  NodeJS
</a></li><li class="dropdown-item"><!----> <a href="/tools/Sourcetree/" class="nav-link">
  Sourcetree
</a></li><li class="dropdown-item"><!----> <a href="/tools/VisualStudioCode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/XShell/" class="nav-link">
  XShell
</a></li><li class="dropdown-item"><!----> <a href="/tools/Typora/" class="nav-link">
  Typora
</a></li><li class="dropdown-item"><!----> <a href="/tools/PicGo/" class="nav-link">
  PicGo
</a></li><li class="dropdown-item"><!----> <a href="/tools/XMind/" class="nav-link">
  XMind
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>规范</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/standard/" aria-current="page" class="sidebar-link">目标</a></li><li><a href="/standard/HTML.html" class="sidebar-link">HTML 编码规范</a></li><li><a href="/standard/CSS.html" class="sidebar-link">CSS 编码规范</a></li><li><a href="/standard/JavaScript.html" class="sidebar-link">JavaScript 编码规范</a></li><li><a href="/standard/VUE.html" aria-current="page" class="active sidebar-link">Vue 编码规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/standard/VUE.html#_1-基于模块开发" class="sidebar-link">1 基于模块开发</a></li><li class="sidebar-sub-header"><a href="/standard/VUE.html#_2-vue-组件命名" class="sidebar-link">2 Vue 组件命名</a></li><li class="sidebar-sub-header"><a href="/standard/VUE.html#_3-组件表达式简单化" class="sidebar-link">3 组件表达式简单化</a></li><li class="sidebar-sub-header"><a href="/standard/VUE.html#_4-组件-props-原子化" class="sidebar-link">4 组件 props 原子化</a></li><li class="sidebar-sub-header"><a href="/standard/VUE.html#_5-验证组件的-props" class="sidebar-link">5 验证组件的 props</a></li><li class="sidebar-sub-header"><a href="/standard/VUE.html#_6-将-this-赋值给-component-变量" class="sidebar-link">6 将 this 赋值给 component 变量</a></li><li class="sidebar-sub-header"><a href="/standard/VUE.html#_7-组件结构化" class="sidebar-link">7 组件结构化</a></li><li class="sidebar-sub-header"><a href="/standard/VUE.html#_8-组件事件命名" class="sidebar-link">8 组件事件命名</a></li><li class="sidebar-sub-header"><a href="/standard/VUE.html#_9-避免-this-parent" class="sidebar-link">9 避免 this.$parent</a></li><li class="sidebar-sub-header"><a href="/standard/VUE.html#_10-谨慎使用-this-refs" class="sidebar-link">10 谨慎使用 this.$refs</a></li><li class="sidebar-sub-header"><a href="/standard/VUE.html#_11-使用组件名作为样式作用域空间" class="sidebar-link">11 使用组件名作为样式作用域空间</a></li><li class="sidebar-sub-header"><a href="/standard/VUE.html#_12-提供组件-api-文档" class="sidebar-link">12 提供组件 API 文档</a></li><li class="sidebar-sub-header"><a href="/standard/VUE.html#_13-提供组件-demo" class="sidebar-link">13 提供组件 demo</a></li><li class="sidebar-sub-header"><a href="/standard/VUE.html#_14-对组件文件进行代码校验" class="sidebar-link">14 对组件文件进行代码校验</a></li><li class="sidebar-sub-header"><a href="/standard/VUE.html#_15-只在需要时创建组件" class="sidebar-link">15 只在需要时创建组件</a></li><li class="sidebar-sub-header"><a href="/standard/VUE.html#_16-尽可能使用-mixins" class="sidebar-link">16 尽可能使用 mixins</a></li><li class="sidebar-sub-header"><a href="/standard/VUE.html#_17-为v-for设置键值" class="sidebar-link">17 为v-for设置键值</a></li></ul></li><li><a href="/standard/Markdown.html" class="sidebar-link">Markdown 语法说明</a></li><li><a href="/standard/Commit.html" class="sidebar-link">Git Commit 规范指南</a></li><li><a href="/standard/JSON.html" class="sidebar-link">JSON 数据传输标准</a></li><li><a href="/standard/CopyWriter.html" class="sidebar-link">文案风格指南</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="vue-编码规范"><a href="#vue-编码规范" class="header-anchor">#</a> Vue 编码规范</h1> <p>本规范提供了一种统一的编码规范来编写 <a href="http://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue.js<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 代码。这使得代码具有如下的特性：</p> <ul><li>其它开发者或是团队成员更容易阅读和理解。</li> <li>IDEs 更容易理解代码，从而提供高亮、格式化等辅助功能</li> <li>更容易使用现有的工具</li> <li>更容易实现缓存以及代码包的分拆</li></ul> <p>本指南为 <a href="https://github.com/voorhoede" target="_blank" rel="noopener noreferrer">De Voorhoede<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 参考 <a href="https://github.com/voorhoede/riotjs-style-guide" target="_blank" rel="noopener noreferrer">RiotJS 编码规范<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 而写。</p> <h2 id="_1-基于模块开发"><a href="#_1-基于模块开发" class="header-anchor">#</a> 1 基于模块开发</h2> <p>始终基于模块的方式来构建你的 app，每一个子模块只做一件事情。</p> <p>Vue.js 的设计初衷就是帮助开发者更好的开发界面模块。一个模块是应用程序中独立的一个部分。</p> <h3 id="怎么做"><a href="#怎么做" class="header-anchor">#</a> 怎么做？</h3> <p>每一个 Vue 组件（等同于模块）<a href="(https://addyosmani.com/first/)">首先</a>必须专注于解决一个<a href="http://en.wikipedia.org/wiki/Single_responsibility_principle" target="_blank" rel="noopener noreferrer">单一的问题<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，<em>独立的</em>、<em>可复用的</em>、<em>微小的</em> 和 <em>可测试的</em>。</p> <p>如果你的组件做了太多的事或是变得臃肿，请将其拆分成更小的组件并保持单一的原则。一般来说，尽量保证每一个文件的代码行数不要超过 100 行。也请保证组件可独立的运行。比较好的做法是增加一个单独的 demo 示例。</p> <h2 id="_2-vue-组件命名"><a href="#_2-vue-组件命名" class="header-anchor">#</a> 2 Vue 组件命名</h2> <p>组件的命名需遵从以下原则：</p> <ul><li><strong>有意义的</strong>：不过于具体，也不过于抽象</li> <li><strong>简短</strong>: 2 到 3 个单词</li> <li><strong>具有可读性</strong>：以便于沟通交流</li></ul> <p>同时还需要注意：</p> <ul><li>必须符合<strong>自定义元素规范</strong>: <a href="https://www.w3.org/TR/custom-elements/#concepts" target="_blank" rel="noopener noreferrer">使用连字符<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>分隔单词，切勿使用保留字。</li> <li><strong><code>app-</code>  前缀作为命名空间</strong>：如果非常通用的话可使用一个单词来命名，这样可以方便于其它项目里复用。</li></ul> <h3 id="为什么"><a href="#为什么" class="header-anchor">#</a> 为什么？</h3> <ul><li>组件是通过组件名来调用的。所以组件名必须简短、富有含义并且具有可读性。</li></ul> <h3 id="如何做"><a href="#如何做" class="header-anchor">#</a> 如何做？</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 推荐 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>app-header</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>app-header</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>user-list</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>user-list</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>range-slider</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>range-slider</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 避免 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>btn-group</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>btn-group</span><span class="token punctuation">&gt;</span></span> <span class="token comment">&lt;!-- 虽然简短但是可读性差. 使用 `button-group` 替代 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ui-slider</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ui-slider</span><span class="token punctuation">&gt;</span></span> <span class="token comment">&lt;!-- ui 前缀太过于宽泛，在这里意义不明确 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slider</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slider</span><span class="token punctuation">&gt;</span></span> <span class="token comment">&lt;!-- 与自定义元素规范不兼容 --&gt;</span>
</code></pre></div><h2 id="_3-组件表达式简单化"><a href="#_3-组件表达式简单化" class="header-anchor">#</a> 3 组件表达式简单化</h2> <p>Vue.js 的表达式是 100% 的 Javascript 表达式。这使得其功能性很强大，但也带来潜在的复杂性。因此，你应该尽量<strong>保持表达式的简单化</strong>。</p> <h3 id="为什么-2"><a href="#为什么-2" class="header-anchor">#</a> 为什么？</h3> <ul><li>复杂的行内表达式难以阅读。</li> <li>行内表达式是不能够通用的，这可能会导致重复编码的问题。</li> <li>IDE 基本上不能识别行内表达式语法，所以使用行内表达式 IDE 不能提供自动补全和语法校验功能。</li></ul> <h3 id="怎么做-2"><a href="#怎么做-2" class="header-anchor">#</a> 怎么做？</h3> <p>如果你发现写了太多复杂并难以阅读的行内表达式，那么可以使用 method 或是 computed 属性来替代其功能。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 推荐 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>
    {{ `${year}-${month}` }}
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    computed<span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token function">month</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">twoDigits</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getUTCMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function">year</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getUTCFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    methods<span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token function">twoDigits</span><span class="token punctuation">(</span><span class="token parameter">num</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token string">'0'</span> <span class="token operator">+</span> num<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 避免 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>
    {{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_4-组件-props-原子化"><a href="#_4-组件-props-原子化" class="header-anchor">#</a> 4 组件 props 原子化</h2> <p>虽然 Vue.js 支持传递复杂的 JavaScript 对象通过 props 属性，但是你应该尽可能的使用原始类型的数据。尽量只使用 <a href="https://developer.mozilla.org/en-US/docs/Glossary/Primitive" target="_blank" rel="noopener noreferrer">JavaScript 原始类型<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（字符串、数字、布尔值）和函数。尽量避免复杂的对象。</p> <h3 id="为什么-3"><a href="#为什么-3" class="header-anchor">#</a> 为什么？</h3> <ul><li>使得组件 API 清晰直观。</li> <li>只使用原始类型和函数作为 props 使得组件的 API 更接近于 HTML (5) 原生元素。</li> <li>其它开发者更好的理解每一个 prop 的含义、作用。</li> <li>传递过于复杂的对象使得我们不能够清楚的知道哪些属性或方法被自定义组件使用，这使得代码难以重构和维护。</li></ul> <h3 id="怎么做-3"><a href="#怎么做-3" class="header-anchor">#</a> 怎么做？</h3> <p>组件的每一个属性单独使用一个 props，并且使用函数或是原始类型的值。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 推荐 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>range-slider</span>
  <span class="token attr-name">:values</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[10, 20]<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">@on-slide</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>updateInputs<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">@on-end</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>updateResults<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>range-slider</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 避免 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>range-slider</span> <span class="token attr-name">:config</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>complexConfigObject<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>range-slider</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_5-验证组件的-props"><a href="#_5-验证组件的-props" class="header-anchor">#</a> 5 验证组件的 props</h2> <p>在 Vue.js 中，组件的 props 即 API，一个稳定并可预测的 API 会使得你的组件更容易被其他开发者使用。</p> <p>组件 props 通过自定义标签的属性来传递。属性的值可以是 Vue.js 字符串 ( <code>:attr=&quot;value&quot;</code>  或  <code>v-bind:attr=&quot;value&quot;</code> ) 或是不传。你需要保证组件的 props 能应对不同的情况。</p> <h3 id="为什么-4"><a href="#为什么-4" class="header-anchor">#</a> 为什么？</h3> <p>验证组件 props 可以保证你的组件永远是可用的（防御性编程）。即使其他开发者并未按照你预想的方法使用时也不会出错。</p> <h3 id="怎么做-4"><a href="#怎么做-4" class="header-anchor">#</a> 怎么做？</h3> <ul><li>提供默认值。</li> <li>使用  <code>type</code>  属性<a href="http://vuejs.org/v2/guide/components.html#Prop-Validation" target="_blank" rel="noopener noreferrer">校验类型<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</li> <li>使用 props 之前先检查该 prop 是否存在。</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>range<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>value<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>max<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>min<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    props<span class="token operator">:</span> <span class="token punctuation">{</span>
      max<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> Number<span class="token punctuation">,</span> <span class="token comment">// 这里添加了数字类型的校验</span>
        <span class="token keyword">default</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token number">10</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      min<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> Number<span class="token punctuation">,</span>
        <span class="token keyword">default</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      value<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> Number<span class="token punctuation">,</span>
        <span class="token keyword">default</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token number">4</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="更好的做法"><a href="#更好的做法" class="header-anchor">#</a> 更好的做法</h3> <div class="language-js extra-class"><pre class="language-js"><code>props<span class="token operator">:</span> <span class="token punctuation">{</span>
  status<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> String<span class="token punctuation">,</span>
    required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token function-variable function">validator</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">[</span>
          <span class="token string">'syncing'</span><span class="token punctuation">,</span>
          <span class="token string">'synced'</span><span class="token punctuation">,</span>
          <span class="token string">'version-conflict'</span><span class="token punctuation">,</span>
          <span class="token string">'error'</span>
        <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="_6-将-this-赋值给-component-变量"><a href="#_6-将-this-赋值给-component-变量" class="header-anchor">#</a> 6 将  <code>this</code>  赋值给  <code>component</code>  变量</h2> <p>在 Vue.js 组件上下文中， <code>this</code>  指向了组件实例。因此当你切换到了不同的上下文时，要确保  <code>this</code>  指向一个可用的  <code>component</code>  变量。</p> <p>换句话说，如果你正在使用 <strong>ES6</strong> 的话，就不要再编写  <code>var self = this;</code>  这样的代码了，您可以安全地使用 Vue 组件。</p> <h3 id="为什么-5"><a href="#为什么-5" class="header-anchor">#</a> 为什么？</h3> <ul><li>使用 <strong>ES6</strong>，就不再需要将  <code>this</code>  保存到一个变量中了。</li> <li>一般来说，当你使用箭头函数时，会保留  <code>this</code>  的作用域。（译者注：箭头函数没有它自己的 this 值，箭头函数内的 this 值继承自外围作用域。）</li> <li>如果你没有使用 <strong>ES6</strong>，当然也就不会使用  <code>箭头函数</code>  啦，那你必须将 “this” 保存到到某个变量中。这是唯一的例外。</li></ul> <h3 id="怎么做-5"><a href="#怎么做-5" class="header-anchor">#</a> 怎么做？</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token string">'hello'</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">printHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 避免 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token string">'hello'</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">printHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> self <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span> <span class="token comment">// 没有必要</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>self<span class="token punctuation">.</span><span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_7-组件结构化"><a href="#_7-组件结构化" class="header-anchor">#</a> 7 组件结构化</h2> <p>按照一定的结构组织，使得组件便于理解。</p> <h3 id="为什么-6"><a href="#为什么-6" class="header-anchor">#</a> 为什么？</h3> <ul><li>导出一个清晰、组织有序的组件，使得代码易于阅读和理解。同时也便于标准化。</li> <li>按首字母排序 properties、data、computed、watches 和 methods 使得这些对象内的属性便于查找。</li> <li>合理组织，使得组件易于阅读。（name; extends; props, data 和 computed; components; watch 和 methods; lifecycle methods 等）。</li> <li>使用  <code>name</code>  属性。借助于 <a href="https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en" target="_blank" rel="noopener noreferrer">vue devtools<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 可以让你更方便的测试。</li> <li>合理的 CSS 结构，如 <a href="https://medium.com/tldr-tech/bem-blocks-elements-and-modifiers-6b3b0af9e3ea#.bhnomd7gw" target="_blank" rel="noopener noreferrer">BEM<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 或 <a href="https://github.com/rstacruz/rscss" target="_blank" rel="noopener noreferrer">rscss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> - <a href="#%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6%E5%90%8D%E4%BD%9C%E4%B8%BA%E6%A0%B7%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F%E7%A9%BA%E9%97%B4">详情？</a>。</li> <li>使用单文件 .vue 文件格式来组件代码。</li></ul> <h3 id="怎么做-6"><a href="#怎么做-6" class="header-anchor">#</a> 怎么做？</h3> <p>组件结构化</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>html<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Ranger__Wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- ... --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token comment">// 不要忘记了 name 属性</span>
    name<span class="token operator">:</span> <span class="token string">'RangeSlider'</span><span class="token punctuation">,</span>
    <span class="token comment">// 使用组件 mixins 共享通用功能</span>
    mixins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token comment">// 组成新的组件</span>
    <span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 组件属性、变量</span>
    props<span class="token operator">:</span> <span class="token punctuation">{</span>
      bar<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 按字母顺序</span>
      foo<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
      fooBar<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 变量</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    computed<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 使用其它组件</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 方法</span>
    watch<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    methods<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 生命周期函数</span>
    <span class="token function">beforeCreate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token selector">.Ranger__Wrapper</span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_8-组件事件命名"><a href="#_8-组件事件命名" class="header-anchor">#</a> 8 组件事件命名</h2> <p>Vue.js 提供的处理函数和表达式都是绑定在 ViewModel 上的，组件的每一个事件都应该按照一个好的命名规范来，这样可以避免不少的开发问题，具体可见如下 <strong>为什么</strong>。</p> <h3 id="为什么-7"><a href="#为什么-7" class="header-anchor">#</a> 为什么？</h3> <ul><li>开发者可以随意给事件命名，即使是原生事件的名字，这样会带来迷惑性。</li> <li>过于宽松的事件命名可能与 <a href="https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats" target="_blank" rel="noopener noreferrer">DOM 模板不兼容<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</li></ul> <h3 id="怎么做-7"><a href="#怎么做-7" class="header-anchor">#</a> 怎么做？</h3> <ul><li>事件名也使用连字符命名。</li> <li>一个事件的名字对应组件外的一组意义操作，如：upload-success、upload-error 以及 dropzone-upload-success、dropzone-upload-error （如果需要前缀的话）。</li> <li>事件命名应该以动词（如 client-api-load） 或是 名词（如 drive-upload-success）结尾。（<a href="https://github.com/GoogleWebComponents/style-guide#events" target="_blank" rel="noopener noreferrer">出处<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>）</li></ul> <h2 id="_9-避免-this-parent"><a href="#_9-避免-this-parent" class="header-anchor">#</a> 9 避免 this.$parent</h2> <p>Vue.js 支持组件嵌套，并且子组件可访问父组件的上下文。访问组件之外的上下文违反了<a href="#%E5%9F%BA%E4%BA%8E%E6%A8%A1%E5%9D%97%E5%BC%80%E5%8F%91">基于模块开发</a>的<a href="https://addyosmani.com/first/" target="_blank" rel="noopener noreferrer">第一原则<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。因此你应该尽量避免使用 <strong><code>this.$parent</code></strong>。</p> <h3 id="为什么-8"><a href="#为什么-8" class="header-anchor">#</a> 为什么？</h3> <ul><li>组件必须相互保持独立，Vue 组件也是。如果组件需要访问其父层的上下文就违反了该原则。</li> <li>如果一个组件需要访问其父组件的上下文，那么该组件将不能在其它上下文中复用。</li></ul> <h3 id="怎么做-8"><a href="#怎么做-8" class="header-anchor">#</a> 怎么做？</h3> <ul><li>通过 props 将值传递给子组件。</li> <li>通过 props 传递回调函数给子组件来达到调用父组件方法的目的。</li> <li>通过在子组件触发事件来通知父组件。</li></ul> <h2 id="_10-谨慎使用-this-refs"><a href="#_10-谨慎使用-this-refs" class="header-anchor">#</a> 10 谨慎使用 this.$refs</h2> <p>Vue.js 支持通过  <code>ref</code>  属性来访问其它组件和 HTML 元素。并通过  <code>this.$refs</code>  可以得到组件或 HTML 元素的上下文。在大多数情况下，通过  <code>this.$refs</code>  来访问其它组件的上下文是可以避免的。在使用的的时候你需要注意避免调用了不恰当的组件 API，所以应该尽量避免使用  <code>this.$refs</code> 。</p> <h3 id="为什么-9"><a href="#为什么-9" class="header-anchor">#</a> 为什么？</h3> <ul><li>组件必须是保持独立的，如果一个组件的 API 不能够提供所需的功能，那么这个组件在设计、实现上是有问题的。</li> <li>组件的属性和事件必须足够的给大多数的组件使用。</li></ul> <h3 id="怎么做-9"><a href="#怎么做-9" class="header-anchor">#</a> 怎么做？</h3> <ul><li>提供良好的组件 API。</li> <li>总是关注于组件本身的目的。</li> <li>拒绝定制代码。如果你在一个通用的组件内部编写特定需求的代码，那么代表这个组件的 API 不够通用，或者你可能需要一个新的组件来应对该需求。</li> <li>检查所有的 props 是否有缺失的，如果有提一个 issue 或是完善这个组件。</li> <li>检查所有的事件。子组件向父组件通信一般是通过事件来实现的，但是大多数的开发者更多的关注于 props 从忽视了这点。</li> <li><strong>Props 向下传递，事件向上传递！</strong>。以此为目标升级你的组件，提供良好的 API 和 独立性。</li> <li>当遇到 props 和 events 难以实现的功能时，通过  <code>this.$refs</code>  来实现。</li> <li>当需要操作 DOM 无法通过指令来做的时候可使用  <code>this.$ref</code>  而不是  <code>JQuery</code> 、 <code>document.getElement*</code> 、 <code>document.queryElement</code> 。</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 推荐，并未使用 this.$refs --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>range</span> <span class="token attr-name">:max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>max<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>min<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">@current-value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>currentValue<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>range</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 使用 this.$refs 的适用情况--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>modal</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basicModal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>Basic Modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$refs.basicModal.hide()<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>modal</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$refs.basicModal.open()<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Open modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- Modal component --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>active<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- ... --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        active<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    methods<span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>active <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>active <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 如果可通过 emited 来做则避免通过 this.$refs 直接访问 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>range</span> <span class="token attr-name">:max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>max<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>min<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>range<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>range</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
    methods<span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token function">getRangeCurrentValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>range<span class="token punctuation">.</span>currentValue<span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_11-使用组件名作为样式作用域空间"><a href="#_11-使用组件名作为样式作用域空间" class="header-anchor">#</a> 11 使用组件名作为样式作用域空间</h2> <p>Vue.js 的组件是自定义元素，这非常适合用来作为样式的根作用域空间。可以将组件名作为 CSS 类的命名空间。</p> <h3 id="为什么-10"><a href="#为什么-10" class="header-anchor">#</a> 为什么？</h3> <ul><li>给样式加上作用域空间可以避免组件样式影响外部的样式。</li> <li>保持模块名、目录名、样式根作用域名一样，可以很好的将其关联起来，便于开发者理解。</li></ul> <h3 id="怎么做-10"><a href="#怎么做-10" class="header-anchor">#</a> 怎么做？</h3> <p>使用组件名作为样式命名的前缀，可基于 BEM 或 OOCSS 范式。同时给 style 标签加上 scoped 属性。加上 scoped 属性编译后会给组件的 class 自动加上唯一的前缀从而避免样式的冲突。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token comment">/* 推荐 */</span>
  <span class="token selector">.MyExample</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
  <span class="token selector">.MyExample li</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
  <span class="token selector">.MyExample__item</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>

  <span class="token comment">/* 避免 */</span>
  <span class="token selector">.My-Example</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token comment">/* 没有用组件名或模块名限制作用域, 不符合 BEM 规范 */</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_12-提供组件-api-文档"><a href="#_12-提供组件-api-文档" class="header-anchor">#</a> 12 提供组件 API 文档</h2> <p>使用 Vue.js 组件的过程中会创建 Vue 组件实例，这个实例是通过自定义属性配置的。为了便于其他开发者使用该组件，对于这些自定义属性即组件 API 应该在  <code>README.md</code>  文件中进行说明。</p> <h3 id="为什么-11"><a href="#为什么-11" class="header-anchor">#</a> 为什么？</h3> <ul><li>良好的文档可以让开发者比较容易的对组件有一个整体的认识，而不用去阅读组件的源码，也更方便开发者使用。</li> <li>组件配置属性即组件的 API，对于组件的用户来说他们更感兴趣的是 API 而不是实现原理。</li> <li>正式的文档会告诉开发者组件 API 变更以及向后的兼容性情况。</li> <li><code>README.md</code>  是标准的我们应该首先阅读的文档文件。代码托管网站（GitHub、Bitbucket、Gitlab 等）会默认在仓库中展示该文件作为仓库的介绍。</li></ul> <h3 id="怎么做-11"><a href="#怎么做-11" class="header-anchor">#</a> 怎么做？</h3> <p>在模块目录中添加  <code>README.md</code>  文件：</p> <div class="language- extra-class"><pre class="language-text"><code>range-slider/
├── range-slider.vue
├── range-slider.less
└── README.md
</code></pre></div><p>在 README 文件中说明模块的功能以及使用场景。对于 vue 组件来说，比较有用的描述是组件的自定义属性即 API 的描述介绍。</p> <div class="language-md extra-class"><pre class="language-md"><code><span class="token title important"><span class="token punctuation">#</span> Range slider</span>

<span class="token title important"><span class="token punctuation">##</span> 功能</span>

range slider 组件可通过拖动的方式来设置一个给定范围内的数值。

该模块使用 <span class="token url">[<span class="token content">noUiSlider</span>](<span class="token url">http://refreshless.com/nouislider/</span>)</span> 来实现跨浏览器和 touch 功能的支持。

<span class="token title important"><span class="token punctuation">##</span> 如何使用</span>

<span class="token code keyword">`&lt;range-slider&gt;`</span> 支持如下的自定义属性：


<span class="token table"><span class="token table-header-row"><span class="token punctuation">|</span><span class="token table-header important"> attribute </span><span class="token punctuation">|</span><span class="token table-header important"> type </span><span class="token punctuation">|</span><span class="token table-header important"> description</span>
</span><span class="token table-line"><span class="token punctuation">|</span> <span class="token punctuation">---</span> <span class="token punctuation">|</span> <span class="token punctuation">---</span> <span class="token punctuation">|</span> <span class="token punctuation">---</span>
</span><span class="token table-data-rows"><span class="token punctuation">|</span><span class="token table-data"> <span class="token code keyword">`min`</span> </span><span class="token punctuation">|</span><span class="token table-data"> Number </span><span class="token punctuation">|</span><span class="token table-data"> 可拖动的最小值.</span>
<span class="token punctuation">|</span><span class="token table-data"> <span class="token code keyword">`max`</span> </span><span class="token punctuation">|</span><span class="token table-data"> Number </span><span class="token punctuation">|</span><span class="token table-data"> 可拖动的最大值.</span>
<span class="token punctuation">|</span><span class="token table-data"> <span class="token code keyword">`values`</span> </span><span class="token punctuation">|</span><span class="token table-data"> Number[] <span class="token italic"><span class="token punctuation">*</span><span class="token content">optional</span><span class="token punctuation">*</span></span> </span><span class="token punctuation">|</span><span class="token table-data"> 包含最大值和最小值的数组.  如. <span class="token code keyword">`values=&quot;[10, 20]&quot;`</span>. Defaults to <span class="token code keyword">`[opts.min, opts.max]`</span>.</span>
<span class="token punctuation">|</span><span class="token table-data"> <span class="token code keyword">`step`</span> </span><span class="token punctuation">|</span><span class="token table-data"> Number <span class="token italic"><span class="token punctuation">*</span><span class="token content">optional</span><span class="token punctuation">*</span></span> </span><span class="token punctuation">|</span><span class="token table-data"> 增加减小的数值单位，默认为 1.</span>
<span class="token punctuation">|</span><span class="token table-data"> <span class="token code keyword">`on-slide`</span> </span><span class="token punctuation">|</span><span class="token table-data"> Function <span class="token italic"><span class="token punctuation">*</span><span class="token content">optional</span><span class="token punctuation">*</span></span> </span><span class="token punctuation">|</span><span class="token table-data"> 用户拖动开始按钮或者结束按钮时的回调函数，函数接受 <span class="token code keyword">`(values, HANDLE)`</span> 格式的参数。 如： <span class="token code keyword">`on-slide={ updateInputs }`</span>,  <span class="token code keyword">`component.updateInputs = (values, HANDLE) =&gt; { const value = values[HANDLE]; }`</span>.</span>
<span class="token punctuation">|</span><span class="token table-data"> <span class="token code keyword">`on-end`</span> </span><span class="token punctuation">|</span><span class="token table-data"> Function <span class="token italic"><span class="token punctuation">*</span><span class="token content">optional</span><span class="token punctuation">*</span></span> </span><span class="token punctuation">|</span><span class="token table-data"> 当用户停止拖动时触发的回调函数，函数接受 <span class="token code keyword">`(values, HANDLE)`</span> 格式的参数。</span>
</span></span>
</code></pre></div><p>如需要自定义 slider 的样式可参考 <a href="/standard/(http://refreshless.com/nouislider/more/#section-styling)">noUiSlider 文档</a></p> <h2 id="_13-提供组件-demo"><a href="#_13-提供组件-demo" class="header-anchor">#</a> 13 提供组件 demo</h2> <p>添加  <code>index.html</code>  文件作为组件的 demo 示例，并提供不同配置情况的效果，说明组件是如何使用的。</p> <h3 id="为什么-12"><a href="#为什么-12" class="header-anchor">#</a> 为什么？</h3> <ul><li>demo 可以说明组件是独立可使用的。</li> <li>demo 可以让开发者预览组件的功能效果。</li> <li>demo 可以展示组件各种配置参数下的功能。</li></ul> <h2 id="_14-对组件文件进行代码校验"><a href="#_14-对组件文件进行代码校验" class="header-anchor">#</a> 14 对组件文件进行代码校验</h2> <p>代码校验可以保持代码的统一性以及追踪语法错误。.vue 文件可以通过使用  <code>eslint-plugin-html</code>  插件来校验代码。你可以通过  <code>vue-cli</code>  来开始你的项目， <code>vue-cli</code>  默认会开启代码校验功能。</p> <h3 id="为什么-13"><a href="#为什么-13" class="header-anchor">#</a> 为什么？</h3> <ul><li>保证所有的开发者使用同样的编码规范。</li> <li>更早的感知到语法错误。</li></ul> <h3 id="怎么做-12"><a href="#怎么做-12" class="header-anchor">#</a> 怎么做？</h3> <p>为了校验工具能够校验  <code>*.vue</code>  文件，你需要将代码编写在  <code>&lt;script&gt;</code>  标签中，并使<a href="#%E4%BF%9D%E6%8C%81%E7%BB%84%E4%BB%B6%E8%A1%A8%E8%BE%BE%E5%BC%8F%E7%AE%80%E5%8D%95%E5%8C%96">组件表达式简单化</a>，因为校验工具无法理解行内表达式，配置校验工具可以访问全局变量  <code>vue</code>  和组件的  <code>props</code> 。</p> <h4 id="eslint"><a href="#eslint" class="header-anchor">#</a> ESLint</h4> <p><a href="http://eslint.org/" target="_blank" rel="noopener noreferrer">ESLint<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 需要通过 <a href="https://github.com/BenoitZugmeyer/eslint-plugin-html#eslint-plugin-html" target="_blank" rel="noopener noreferrer">ESLint HTML 插件<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>来抽取组件中的代码。</p> <p>通过  <code>.eslintrc</code>  文件来配置 ESlint，这样 IDE 可以更好的理解校验配置项：</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;extends&quot;</span><span class="token operator">:</span> <span class="token string">&quot;eslint:recommended&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;plugins&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;html&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token property">&quot;env&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;browser&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;globals&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;opts&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token property">&quot;vue&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>运行 ESLint</p> <div class="language-bash extra-class"><pre class="language-bash"><code>eslint src/**/*.vue
</code></pre></div><h4 id="jshint"><a href="#jshint" class="header-anchor">#</a> JSHint</h4> <p><a href="http://jshint.com/" target="_blank" rel="noopener noreferrer">JSHint<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 可以解析 HTML（使用  <code>--extra-ext</code>  命令参数）和抽取代码（使用  <code>--extract=auto</code>  命令参数）。</p> <p>通过  <code>.jshintrc</code>  文件来配置 ESlint，这样 IDE 可以更好的理解校验配置项。</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;browser&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token property">&quot;predef&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;opts&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><p>运行 JSHint</p> <div class="language-bash extra-class"><pre class="language-bash"><code>jshint --config modules/.jshintrc --extra-ext<span class="token operator">=</span>html --extract<span class="token operator">=</span>auto modules/
</code></pre></div><p>注：JSHint 不接受  <code>vue</code>  扩展名的文件，只支持  <code>html</code> 。</p> <h2 id="_15-只在需要时创建组件"><a href="#_15-只在需要时创建组件" class="header-anchor">#</a> 15 只在需要时创建组件</h2> <h3 id="为什么-14"><a href="#为什么-14" class="header-anchor">#</a> 为什么？</h3> <p>Vue.js 是一个基于组件的框架。如果你不知道何时创建组件可能会导致以下问题：</p> <ul><li>如果组件太大，可能很难重用和维护；</li> <li>如果组件太小，你的项目就会（因为深层次的嵌套而）被淹没，也更难使组件间通信；</li></ul> <h3 id="怎么做-13"><a href="#怎么做-13" class="header-anchor">#</a> 怎么做？</h3> <ul><li>始终记住为你的项目需求构建你的组件，但是你也应该尝试想到它们能够从中脱颖而出（独立于项目之外）。如果它们能够在你项目之外工作，就像一个库那样，就会使得它们更加健壮和一致。</li> <li>尽可能早地构建你的组件总是更好的，因为这样使得你可以在一个已经存在和稳定的组件上构建你的组件间通信（props &amp; events）。</li></ul> <h3 id="规则"><a href="#规则" class="header-anchor">#</a> 规则</h3> <ul><li>首先，尽可能早地尝试构建出诸如模态框、提示框、工具条、菜单、头部等这些明显的（通用型）组件。总之，你知道的这些组件以后一定会在当前页面或者是全局范围内需要。</li> <li>第二，在每一个新的开发项目中，对于一整个页面或者其中的一部分，在进行开发前先尝试思考一下。如果你认为它有一部分应该是一个组件，那么就创建它吧。</li> <li>最后，如果你不确定，那就不要。避免那些 “以后可能会有用” 的组件污染你的项目。它们可能会永远的只是（静静地）待在那里，这一点也不聪明。注意，一旦你意识到应该这么做，最好是就把它打破，以避免与项目的其他部分构成兼容性和复杂性。</li></ul> <hr> <h2 id="_16-尽可能使用-mixins"><a href="#_16-尽可能使用-mixins" class="header-anchor">#</a> 16 尽可能使用 mixins</h2> <h3 id="为什么-15"><a href="#为什么-15" class="header-anchor">#</a> 为什么？</h3> <p>Mixins 封装可重用的代码，避免了重复。如果两个组件共享有相同的功能，则可以使用 mixin。通过 mixin，你可以专注于单个组件的任务和抽象的通用代码。这有助于更好地维护你的应用程序。</p> <h3 id="怎么做-14"><a href="#怎么做-14" class="header-anchor">#</a> 怎么做？</h3> <p>假设你有一个移动端和桌面端的菜单组件，它们共享一些功能。我们可以抽象出这两个组件的核心功能到一个 mixin 中，例如：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> MenuMixin <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      language<span class="token operator">:</span> <span class="token string">'EN'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">changeLanguage</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>language <span class="token operator">===</span> <span class="token string">'DE'</span><span class="token punctuation">)</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$set</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">'language'</span><span class="token punctuation">,</span> <span class="token string">'EN'</span><span class="token punctuation">)</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>language <span class="token operator">===</span> <span class="token string">'EN'</span><span class="token punctuation">)</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$set</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">'language'</span><span class="token punctuation">,</span> <span class="token string">'DE'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> MenuMixin
</code></pre></div><p>要使用 mixin，只需将其导入到两个组件中（我只展示移动组件）。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mobile<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeLanguage<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Change language<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> MenuMixin <span class="token keyword">from</span> <span class="token string">'./MenuMixin'</span>

  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    mixins<span class="token operator">:</span> <span class="token punctuation">[</span>MenuMixin<span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_17-为v-for设置键值"><a href="#_17-为v-for设置键值" class="header-anchor">#</a> 17 为 v-for 设置键值</h2> <p>总是用 key 配合 v-for</p> <h3 id="为什么-16"><a href="#为什么-16" class="header-anchor">#</a> 为什么？</h3> <p>key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改 / 复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。</p> <h3 id="怎么做-15"><a href="#怎么做-15" class="header-anchor">#</a> 怎么做？</h3> <p>假设你有一个待办事项列表：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span>
      <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>todo in todos<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>todo.id<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span>
      {{ todo.text }}
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        todos<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
            text<span class="token operator">:</span> <span class="token string">'学习使用 v-for'</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            id<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
            text<span class="token operator">:</span> <span class="token string">'学习使用 key'</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">文档更新时间:</span> <span class="time">2021-06-10 17:57:34</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/standard/JavaScript.html" class="prev">
        JavaScript 编码规范
      </a></span> <span class="next"><a href="/standard/Markdown.html">
        Markdown 语法说明
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.7f089e4c.js" defer></script><script src="/assets/js/2.9f5e73e8.js" defer></script><script src="/assets/js/3.2a47c23c.js" defer></script><script src="/assets/js/29.60c8dbe1.js" defer></script>
  </body>
</html>
